<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ChatTo</title>
  <style>
    body {
      margin: 0;
      min-width: 300px;
      height: 100vh;
      box-sizing: border-box;
      overflow: hidden;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      padding: 0;
    }

    li {
      list-style: none;
    }

    p {
      margin: 0;
    }

    h1 {
      margin-top: 25vh;
    }

    h1 .logo {
      max-width: 50vw;
      margin: 0 auto;
    }

    /* 搜索框 */
    .search-box {
      width: 100%;
      max-width: 80vw;
      position: relative;
      margin: 2rem auto;
    }

    .search-box input {
      box-sizing: border-box;
      width: 100%;
      height: 3rem;
      border-radius: 1.5rem;
      padding: 0 calc(1.2rem + 15px) 0 0.5em;
      font-size: 1.1rem;
      color: #333;
      outline: none;
      border: 2px solid #333;
    }

    .search-box .search-btn {
      background: none;
      border: none;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }


    /* 导航书签 */
    #navigation-bookmark {
      --grid-size: 16vw;
      width: 100%;
      max-width: 80vw;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, var(--grid-size));
      grid-template-rows: repeat(auto-fill, var(--grid-size));
      grid-auto-flow: dense;
      grid-auto-rows: var(--grid-size);
      justify-content: flex-start;
    }

    .navigation-logo{
      width: 100%;
      height: 100%;
      border-radius: 0.5rem;
    }
    .navigation-item {
      box-sizing: border-box;
      padding: 0 calc(var(--grid-size) / 6) calc(var(--grid-size) / 3);
      cursor: pointer;
    }

    .navigation-title {
      text-align: center;
      font-size: 36px;
    }

    @media screen and (max-width: 1440px) {
      .navigation-title{
        font-size: 22px;
      }
    }

    @media screen and (max-width: 970px) {
      .navigation-title{
        font-size: 16px;
      }
    }

    @media screen and (max-width: 600px) {
      .navigation-title{
        font-size: 14px;
      }
    }

    @media screen and (max-width: 460px) {
      .navigation-title{
        font-size: 12px;
      }
    } 
  </style>
</head>

<body>
  <h1>
    <div class="logo">
      <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 584.28 146.11">
        <defs>
          <style>
            .cls-1 {
              fill: #040000;
            }
          </style>
        </defs>
        <path class="cls-1"
          d="M128.81,363.87a146.2,146.2,0,0,0-35.67-4.81q-37.85,0-61.74,20.94T7.52,433.66q0,26.83,17.68,43.43,17.69,16.76,46.22,16.76,22.8,0,46.22-10.4v-.15q.93-9.32-5.66-14.66t-15.59-2.87a75.76,75.76,0,0,1-22.49,3.72q-17.21,0-27.3-9.46-10.23-9.61-10.23-25.75,0-20.47,14.73-35.83,14.74-15.19,41.42-15.2A112.33,112.33,0,0,1,108,384.34a17,17,0,0,0,12.48-2.95,17.34,17.34,0,0,0,7.06-10.85Z"
          transform="translate(-7.52 -347.89)" />
        <path class="cls-1"
          d="M164.1,427.61,154.8,494H128.27L145.8,365.73q4.81-17.84,18.77-17.84h10.24l-7.45,55.68a61.92,61.92,0,0,1,15.36-10.08,38.31,38.31,0,0,1,15.2-3.26q9.62,0,15.82,3.11a22.59,22.59,0,0,1,9.31,8.53,32,32,0,0,1,4,12.87,75.43,75.43,0,0,1-.62,17.68l-8.53,61.12h-6.67a16.13,16.13,0,0,1-12.88-5.82A17.62,17.62,0,0,1,194.2,474l5.27-37.53a44.61,44.61,0,0,0,.46-10.71,18.91,18.91,0,0,0-1.86-6.67,10.92,10.92,0,0,0-4.34-4.34,13.92,13.92,0,0,0-6.82-1.55q-5,0-10.71,3.72A63.72,63.72,0,0,0,164.1,427.61Z"
          transform="translate(-7.52 -347.89)" />
        <path class="cls-1"
          d="M294,463.75l2.18-16H286.1a57.77,57.77,0,0,0-11.16.93,24.29,24.29,0,0,0-7.76,2.79,16.12,16.12,0,0,0-4.81,4.65,14.77,14.77,0,0,0-2.17,6.21q-.78,5.89,2.48,9.31,3.26,3.25,9.93,3.25a22.05,22.05,0,0,0,10.7-2.79A53,53,0,0,0,294,463.75Zm31.49-38.93-9.77,69h-12.1a8.05,8.05,0,0,1-6.36-2.87c-1.65-1.92-2.27-4.63-1.86-8.15l.31-2.32a54.1,54.1,0,0,1-14.58,9.77,42.67,42.67,0,0,1-17.06,3.41,45.9,45.9,0,0,1-13.5-1.86,26.43,26.43,0,0,1-9.92-5.9,21.66,21.66,0,0,1-5.9-9.46,31.42,31.42,0,0,1-.62-13.34,34.77,34.77,0,0,1,5.28-14.27,32.45,32.45,0,0,1,11-10.08A54,54,0,0,1,267,433a120.24,120.24,0,0,1,22.33-1.86h9.15l.78-5.74a34.67,34.67,0,0,0,.31-7.75,11.42,11.42,0,0,0-2.17-5.59,11.26,11.26,0,0,0-5.12-3.25,26.17,26.17,0,0,0-8.22-1.09,44.14,44.14,0,0,0-12.1,1.55,67.31,67.31,0,0,0-9.77,3.26,6.27,6.27,0,0,1-5.28-.16,6.14,6.14,0,0,1-3.25-4.18l-2.18-10.55a24.49,24.49,0,0,1,5.12-2.95,70.84,70.84,0,0,1,9.15-3.41A68,68,0,0,1,277,388.68a69.68,69.68,0,0,1,12.26-1.08,68.55,68.55,0,0,1,18.61,2.17,26.16,26.16,0,0,1,11.94,6.67,21.06,21.06,0,0,1,5.74,11.63A50.28,50.28,0,0,1,325.5,424.82Z"
          transform="translate(-7.52 -347.89)" />
        <path class="cls-1"
          d="M384,387.29h20.63l-2,11.32a12.22,12.22,0,0,1-4.34,7.75,13.48,13.48,0,0,1-8.38,3.11h-9l-6.51,45.44q-1.55,8.38.31,12.57a7.05,7.05,0,0,0,4.5,3.25,15.13,15.13,0,0,0,5.74.16,10.25,10.25,0,0,1,6.67,1.63,9.76,9.76,0,0,1,4,5.5l2.95,9.47a48.41,48.41,0,0,1-4.81,2c-2,.73-3.8,1.37-5.51,1.94s-2.76.91-3.18,1c-1.75.31-3.67.62-5.74.93a56.84,56.84,0,0,1-6.05.31,39,39,0,0,1-13.8-2.17,19.77,19.77,0,0,1-9-6.36,22.22,22.22,0,0,1-4.18-10.7,55.41,55.41,0,0,1,.31-15.36l7-49.63H336.73l2.17-13.65a10.15,10.15,0,0,1,3.34-6.13,9.38,9.38,0,0,1,6.43-2.4h8.07l1.55-11.48a11.4,11.4,0,0,1,3.8-7.29,11,11,0,0,1,7.52-2.79h17.06Z"
          transform="translate(-7.52 -347.89)" />
        <path class="cls-1"
          d="M415.06,380l.93-4.35a19.09,19.09,0,0,1,6.59-11.16,18.18,18.18,0,0,1,12-4.35h90.89l-.93,5.74A16.82,16.82,0,0,1,518.9,376a15.94,15.94,0,0,1-10.78,4H483.77l-13,92.75a24.11,24.11,0,0,1-8.22,15.2,23.67,23.67,0,0,1-16,5.9h-7.6l16-113.85Z"
          transform="translate(-7.52 -347.89)" />
        <path class="cls-1"
          d="M538.4,470.42a20.36,20.36,0,0,1-16.29-7.29q-6-7.44-5.58-19.23a35.84,35.84,0,0,1,9.3-23.58q8.85-9.92,20.48-9.92a20.63,20.63,0,0,1,16.44,7.44q6.19,7.29,5.74,18.62-.63,14.27-9.31,24.19Q550.35,470.43,538.4,470.42Zm10.54-82.82A52.23,52.23,0,0,0,510,404q-15.81,16.44-16.75,41.41-.93,20.79,11.48,34.28T537,493.23q22.95,0,38.31-16.29t16.44-42.35q.78-20.77-11.16-33.81T548.94,387.6Z"
          transform="translate(-7.52 -347.89)" />
      </svg>
    </div>
  </h1>
  <div id="search-box" class="search-box">
    <input type="text">
    <button class="search-btn">
      <svg t="1708654073885" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4217" width="1.2rem" height="1.2rem">
        <path
          d="M953.504 908.256l-152.608-163.296c61.856-74.496 95.872-167.36 95.872-265.12 0-229.344-186.624-415.968-416.032-415.968-229.344 0-415.968 186.592-415.968 415.968s186.624 415.968 416 415.968c60.096-0.032 118.048-12.576 172.224-37.248 16.096-7.328 23.2-26.304 15.872-42.368-7.328-16.128-26.4-23.264-42.368-15.872-45.856 20.864-94.88 31.456-145.76 31.488-194.08 0-351.968-157.888-351.968-351.968 0-194.048 157.888-351.968 351.968-351.968 194.112 0 352.032 157.888 352.032 351.968 0 91.36-34.848 177.92-98.08 243.744-12.256 12.736-11.84 32.992 0.864 45.248 0.96 0.928 2.208 1.28 3.296 2.08 0.864 1.28 1.312 2.752 2.4 3.904l165.504 177.088c6.272 6.752 14.816 10.144 23.36 10.144 7.84 0 15.68-2.848 21.856-8.64C964.864 941.408 965.568 921.152 953.504 908.256z"
          fill="currentColor" p-id="4218"></path>
      </svg>
    </button>
  </div>
  <ul id="navigation-bookmark">
    <!-- <li class="navigation-item navigation-chat-to">
      <div class="navigation-logo">
        <img src="https://img2.picknewtab.com/file/upload/2024/01/31/1752625632186994688.svg" alt="">
      </div>
      <p class="navigation-title">ChatTo</p>
    </li> -->

  </ul>

  <script>
    const searchBox = document.querySelector("#search-box")
    const input = searchBox.querySelector("input")
    input.addEventListener("focus", function(){
      // 复制搜索框
      const cloneSearchBox = searchBox.cloneNode(true)
      cloneSearchBox.setAttribute("id", "search-box-clone")

      // 隐藏桌面其他元素
      document.body.childNodes.forEach(item=>{
        if(item instanceof HTMLElement){
          item.style.visibility = "hidden"
        }
      })

      // 隐藏原搜索框
      document.body.appendChild(cloneSearchBox)

      const rect = searchBox.getBoundingClientRect();

      // 过渡动画
      cloneSearchBox.style.position = "fixed"
      cloneSearchBox.style.left = "50%"
      cloneSearchBox.style.bottom = "50%"
      cloneSearchBox.style.transform = "translateX(-50%)"
      cloneSearchBox.style.margin = "0.8rem 0"
      cloneSearchBox.style.transition = "bottom 0.3s linear"

      // 当页面下一次绘制时，开始动画
      requestAnimationFrame(function(){
        // 将复制出来的搜索框移动到屏幕底部，出发过度动画
        requestAnimationFrame(function(){
          cloneSearchBox.style.bottom = "0%"
        })
      })

      const cloneInput = cloneSearchBox.querySelector("input")
      cloneInput.style.borderRadius = "0.5rem"
      cloneInput.focus()

      cloneInput.addEventListener("blur", function(){
        // 移除复制的搜索框
        document.body.removeChild(document.getElementById("search-box-clone"))
        // 显示原搜索框
        document.body.childNodes.forEach(item=>{
          if(item instanceof HTMLElement){
            item.style.visibility = "visible"
          }
        })
      })

      cloneInput.addEventListener("keydown", function(e){
        if(e.key === "Enter"){
          // 搜索
          const kw = cloneInput.value
          window.open("https://m.baidu.com/s?wd=" + kw , "_self")
        }
      })

      cloneSearchBox.querySelector(".search-btn").addEventListener("click", function(){
        const kw = cloneInput.value
        window.open("https://m.baidu.com/s?wd=" + kw , "_self")
      })
    })

    // 加载导航书签
    try{
      fetch("https://movetab.jianyueku.com/api/chat-to-app/bookmark/default").then(res=>res.json()).then(data=>{
        if(data.success){
          data.data.forEach(item=>{
            const li = document.createElement("li")
            li.classList.add("navigation-item")
            li.innerHTML = `<a href="${item.url}">
              <div class="navigation-logo" style="${item.svg ? `background: ${item.background}`: ""}">
                <img src="${item.svg ?? item.icon}" alt="">
              </div>
              <p class="navigation-title">${item.title}</p>
              </a>
            `
            document.getElementById("navigation-bookmark").appendChild(li)
          })
        }
      })
    }catch{

    }
  </script>
</body>

</html>